<template>
  <div>
    <ul>
      <li
        v-for="(item, index) in list"
        :key="index"
        class="text-center"
        @click="handldeItem(item)"
      >
        {{ item.title }}
      </li>
    </ul>
    <div class="text-center" style="height: 200px; line-height: 200px">
      <h2>详情</h2>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'list',
  data() {
    return {
      path: "/list/itemDetail",
      list: [
        { id: 1, title: "item1" },
        { id: 2, title: "item2" },
        { id: 3, title: "item3" },
      ],
      activeItem: null,
    };
  },
  activated() {
    if (!this.activeItem) {
      this.activeItem = this.list[0];
    }
    let item = this.activeItem;
    this.$router.push({ path: this.path, query: { id: item.id } });
    console.log('activated')
  },
  beforeRouterLeave() {
    let item = this.activeItem;
    this.$router.push({ path: this.path, query: { id: item.id } });
  },
  methods: {
    handldeItem(item) {
      this.activeItem = item 
      this.$router.push({ path: "/list/itemDetail", query: { id: item.id } });
    },
  },
};
</script>

<style scoped>
li {
  font-size: 2rem;
  width: 100%;
}
li:hover {
  color: #fff;
  background-color: aqua;
  cursor: pointer;
}
</style>
